// import DemoLazyChild from './Demo' 
import { lazy, useState, Suspense } from "react"
import './../纯函数/pureFunc'

const DemoLazyChild = lazy(() => import('./Demo'))
const DemoLazyIndex = () => {
    const [show, setShow] = useState(false)
    //    state = {
    //      show: false
    //      }
    //      handleShow () {
    //         this.setState({
    //           show: !this.state.show
    //         })
    //      }
   const  handleShow = () => {
       setShow(!show)
    }
    return <div>
        异步组件（组件懒加载lazy）
        {
            show ? <Suspense fallback={<div>加载中.....</div>}><DemoLazyChild /></Suspense> : null
        }
        <button onClick={handleShow}>异步加载组件</button>
        <h2>纯函数</h2>
        <pre>
         满足一下四个条件就是一个纯函数：<br/>
          1. 它是一个函数；<br />
          2. 当给定相同的输入（函数的参数）的时候，总是有相同的输出（返回值）；<br />
          3. 没有副作用；<br />
          4. 不依赖于函数外部状态。
        </pre>
         
    </div>
}

export default DemoLazyIndex